<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		input{
			width: 206px;
			height: 50px;
			text-align: right;
			font-size: 40px;
		}
			td{
				width: 50px;
				height: 40px;
				text-align: center;
			}
			td:nth-of-type(4){
				background: rgb(244,148,52);
				color: white;
			}
			#result{
				color: white;
				background: rgb(244,148,52);
			}
			table{
				background: rgb(224,224,224);
			}
		</style>
	</head>
	<body>
		<input type="text" name="btn" id="btn" value="0" disabled/>
		<table border="1" cellspacing="0" cellpadding="">
			<tr>
				<td id="clear">AC</td>
				<td id="zhengFu">+/-</td>
				<td class="yunsuan">%</td>
				<td class="yunsuan">/</td>
			</tr>
			<tr>
				<td class="shuzi">7</td>
				<td class="shuzi">8</td>
				<td class="shuzi">9</td>
				<td class="yunsuan">*</td>
			</tr>
			<tr>
				<td class="shuzi">4</td>
				<td class="shuzi">5</td>
				<td class="shuzi">6</td>
				<td class="yunsuan">-</td>
			</tr>
			<tr>
				<td class="shuzi">1</td>
				<td class="shuzi">2</td>
				<td class="shuzi">3</td>
				<td class="yunsuan">+</td>
			</tr>
			<tr>
				<td colspan="2">0</td>
				<td class="shuzi">.</td>
				<td id="result">=</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		var inputText = document.getElementById("btn");
		var shuZiS = document.getElementsByClassName("shuzi");
		var yunSuanS = document.getElementsByClassName("yunsuan");
		var result = document.getElementById("result");
		var clear =document.getElementById("clear");
		var sss = document.getElementById("zhengFu");
		var longTao = "";
		var temp1 = 0;
		var temp2 = 0;
		sss.onclick = function(){
			temp1 = -temp1;
			inputText.value = temp1;
		}
		clear.onclick = function(){
			inputText.value = "0";
			yunSuanS = null;
			longTao = "";
			temp1 = "";
			temp2 = "";
		}
		for(var i = 0; i < shuZiS.length;i++){
			shuZiS[i].onclick = function(){
				longTao  = longTao + this.innerHTML; 
				inputText.value= longTao;
				temp1 = inputText.value;
				j = 0;
			}
		}
		var jiLv = "";
		var j = 0
		for(var i = 0;i < yunSuanS.length;i++){
			yunSuanS[i].onclick = function(){
				j++;
				if(temp2 != "" && j <= 1){
					yunSuan();
					temp1 = inputText.value;
					temp2 = temp1;
				}else{
					temp1 = inputText.value;
					temp2 = temp1;
				}
				jiLv = this.innerHTML;
				longTao = "";
				temp1 = "";
			}
		}
		function yunSuan(){
			var num1 = parseFloat(temp2);
			var num2 = parseFloat(temp1);
			switch(jiLv){
				case "+":
						inputText.value = num2 + num1;
						break;
				case "-":
						inputText.value = num1 - num2;
						break;
				case "*":
						inputText.value = num2 * num1;
						break;
				case "/":
						inputText.value = num2 / num1;
						break;
				case "%":
						inputText.value = num2 % num1;
						break;
				default:
						break;
			}
		}
		result.onclick = function(){
			yunSuan();
			temp2 = "";
			temp1 = inputText.value;
			longTao = "";
		}
	</script>
</html>